 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>希思黎详情</title>
     <link rel="stylesheet" href="../css/details.css">
     <link rel="stylesheet" href="../iconfont/iconfont.css">
     <link rel="stylesheet" href="../css/reset.css">
     <link rel="stylesheet" href="../css/swiper-bundle.min.css">
     
 </head>
 <body>
   <div id = "all"></div>
   <div class="tips">
     <p><i class="no">✔</i> <span>相同商品不能超过6个</span></p>
   </div>
  <script src="../js/jquery-1.9.1.min.js"></script>
     <div id="header"></div>
     <main class="clear">
       <!-- -----------左边  详情-------- -->
     <div class="main-left clear">
         <ul>
             <li><a href="../index.html"><span>首页</span></a> <b>></b></li>
             <li><a href="list.html"><span>护肤</span></a> <b>></b></li>
             <li><a href="list.html"><span>面部护理</span></a> <b>></b></li>
             <li><a href="list.html"><span>面霜</span></a> <b>></b></li>
             <li>希思黎抗皱修活御致臻颜霜50ml</li>
         </ul>
        <a href=""><i class="iconfont icon-xin love"></i></a> 
            <!-- --------------放大镜------------ -->
             <!-- Swiper -->
  <div class="swiper-container clear" >
    <div class="swiper-wrapper">
      <div class="swiper-slide"> 
        <div id="father">
        <div class="container"> 
          <div class="onepic">
          <!-- <img src="https://assets.sisley.com.cn/upload/materials/pdp/headimgs/150050_01.jpg?x-oss-process=image/resize,w_900/quality,q_95" style="display: block;width: 590px;height: 779px;">  -->
        </div>
          <div class="shade">
            <div class="one">
            <!-- <img src="https://assets.sisley.com.cn/upload/materials/pdp/headimgs/150050_01.jpg" style="display: block;width: 1180px;height: 1558px;"> -->
           </div> 
          </div> 
        </div> 
      </div> 
    </div>
      <div class="swiper-slide"> 
        <div id="father">
        <div class="container two"> 
          <img src="https://assets.sisley.com.cn/upload/materials/pdp/headimgs/150050_03.jpg?x-oss-process=image/resize,w_900/quality,q_95" style="display: block;width: 590px;height: 779px;"> 
          <div class="shade"> 
            <img src="https://assets.sisley.com.cn/upload/materials/pdp/headimgs/150050_03.jpg" style="display: block;width: 1180px;height: 1558px;"> 
          </div> 
        </div> 
      </div>
     </div>
      <div class="swiper-slide">
        <div id="father">
          <div class="container three"> 
            <img src="https://assets.sisley.com.cn/upload/materials/pdp/headimgs/150050_05.jpg?x-oss-process=image/resize,w_900/quality,q_95" style="display: block;width: 590px;height: 779px;"> 
            <div class="shade"> 
              <img src="https://assets.sisley.com.cn/upload/materials/pdp/headimgs/150050_05.jpg" style="display: block;width: 1180px;height: 1558px;"> 
            </div>  
          </div> 
        </div> 
      </div>
    </div>
    <!-- Add Pagination -->
    <!-- <div class="swiper-pagination"></div> -->
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
<!-- ------------详情图片---------- -->
    <div class="image-details clear">
    </div>
     </div>
     <!-- ------------右边 粘性定位------------ -->
     <div class="main-right clear">
       <div class="main-right-detail">
         <!-- <span >希思黎抗皱修活御致臻颜霜50ml</span>
         <p>SISLEYA - L’INTÉGRAL ANTI-ÂGE 50ml</p>
         <p>紧致提升，淡纹焕亮。</p>
         <p>容量: <span>50ml</span> </p> -->
      </div>
     
      <p>数量: <i class="iconfont icon-jianhao reduce"></i><var>1</var> <i class="iconfont icon-21 add"></i></p> 
      <div class="main-right-price">
        <!-- <span class="price">￥<strong>3700.00</strong></span> -->
      </div>
        <input class="shopcar" type="button" value="加入购物车">
        <input type="button" value="立即购买">
       </div>
       
    
    </main> 
    <div class="flower clear">
      <img src="../images/xq.svg" alt="">
      <p>热销星品</p>
    </div>

    <!-- ---------------------轮播------------- -->
    <div class="starBox">
      <ul class="allStar all1">
          <!-- <li>
              <div class="partImg">
                          <img src="https://assets.sisley.com.cn/upload/materials/pdp/headimgs/114100_01.jpg?x-oss-process=image/resize,w_900/quality,q_95" alt="">
                          <img src="https://assets.sisley.com.cn/upload/materials/pdp/headimgs/114100_02.jpg?x-oss-process=image/resize,w_900/quality,q_95" alt="">
                      </div>
                      <a href="javascript:;">
                      <h3>希思黎全能乳液125ml</h3>
                      </a>
                      <div class="partTxt">
                          <p class="txt1">一瓶多效</p>
                          <p>￥<span>${ele.goods_id}</span> </p>
                      </div>
          </li> -->
          
      </ul>
     
  </div>
  <div class="starBtn">
      <div class="starNext next1">
          <i class="iconfont icon-xiangyou"></i>
      </div>
      <div class="starNum">
          <span class="nowNum now1">1</span>/
          <span class="allNum">13</span>
      </div>
      <div class="starPrev prev1">
          <i class="iconfont icon-xiangzuo"></i>
      </div>
  </div>

                    <!-- 返回顶部 -->
   <div class="return">
    <i class="iconfont icon-xiangxia"></i>
</div>


  <!-- ------------------尾部------------ -->
  <div id="foot"></div>
    <script src="../js/ajax.js"></script>
     <script src="../js/details.js"></script>
     <script src="../js/swiper-bundle.min.js"></script>
    <script>
       var swiper = new Swiper('.swiper-container', {
      slidesPerView: 1,
      spaceBetween: 30,
      loop: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
    </script>
     <script>
      var aAllPart = document.querySelector('.allStar')

      ajax({
          url:'../server/goodsChange.php',
          data: {
              pagenum: 1,
              pagesize: 15
          },
          success (res) {
              let arr = JSON.parse(res)
              console.log(arr)

              arr.data.forEach(function (ele, index) {
                  let str = `<li>
              <div class="partImg">
                              <img data-id = "${ele.goods_id}" src="${ele.goods_bigPic2}" alt="" >
                          <div class = "aa">
                              <img data-id = "${ele.goods_id}" src="${ele.goods_bigPic1}" alt="">
                          </div>
                      </div>
                      <a href="javascript:;">
                      <h3>${ele.goods_name}</h3>
                      </a>
                      <div class="partTxt">
                          <p class="txt1">${ele.goods_able}</p>
                          <p>￥<span>${ele.goods_price}</span> </p>
                      </div>
          </li>`
          
              
          aAllPart.innerHTML += str

          })
          
          }
          
      })

      aAllPart.addEventListener('click', function (ev) {
    console.log(window.location.href)
    // 查看详情
    if (ev.target.tagName === 'IMG' || ev.target.tagName === 'H3' || ev.target.className === 'partImg') {
        console.log(ev.target)
        let id = ev.target.getAttribute('data-id')
        window.location.href = 'detalis.html?id='+id
        localStorage.setItem('detailId', id)
    }
})
  </script>
 </body>
 </html>